<template>
  <a-layout style="padding: 24px 0; background: #fff">
    <a-layout-content :style="{ padding: '0 24px', minHeight: '280px' }">
      <p>
        <a-form layout="inline" :model="param">
          <a-form-item>
            <a-input v-model:value="param.name" placeholder="名称">
            </a-input>
          </a-form-item>
          <a-form-item>
            <a-button type="primary" @click="handleQueryEbook({page: 1, size: pagination.pageSize})">
              查询
            </a-button>
          </a-form-item>
          <a-form-item>
            <a-button type="primary" @click="add">
              新增
            </a-button>
          </a-form-item>
        </a-form>
      </p>
      <a-table :dataSource="ebooks"
               :columns="columns"
                :pagination="pagination"
                 @change="handleQueryChange">
        <template #bodyCell="{ column,record}">
          <template v-if="column.key === 'cover'">
            <a-image :src="record.cover" alt="图片加载失败" style="width:80px;height:80px"/>
          </template>
          <template v-if="column.key === 'action'">
           <a-button type="primary" @click="edit(record)">
             编辑
           </a-button>
            <a-popconfirm
              title="确认删除?"
              ok-text="是"
              cancel-text="否"
              @confirm="del(record.id)"
            >
            <a-button type="danger">
              删除
            </a-button>
            </a-popconfirm>
          </template>
        </template>
      </a-table>
    </a-layout-content>
  </a-layout>

  <a-modal v-model:visible="isModalVisible"
           title="电子书编辑"
           ok-text="确定"
           cancel-text="取消"
           @ok="handleEbookOk">
    <a-form :model="ebook" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
      <a-form-item label="封面">
        <a-input v-model:value="ebook.cover" />
      </a-form-item>
      <a-form-item label="名称">
        <a-input v-model:value="ebook.name" />
      </a-form-item>
      <a-form-item label="分类一">
        <a-input v-model:value="ebook.category1Id" />
      </a-form-item>
      <a-form-item label="分类二">
        <a-input v-model:value="ebook.category2Id" />
      </a-form-item>
      <a-form-item label="描述">
        <a-textarea v-model:value="ebook.description" type="textarea" />
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script lang="ts" setup>
import { ref,onMounted } from 'vue';
import axios from "axios";

// 定义数据类型
interface Ebook {
  id: number;
  name: string;
  cover: string;
  category: string;
  docCount: number;
  viewCount: number;
  voteCount: number;
}


interface ResponseData {
  content: {
    list: Ebook[];
    total: number;
  };
}

const ebooks = ref();//ref相当于视图与模型之间的中介
const ebook = ref({});

const pagination = ref({
  current: 1,
  pageSize: 3,
  total: 0
});

//查询表单绑定的对象
const param = ref({});

const isModalVisible = ref(false);

const columns = [
  {
    title: '封面',
    key: 'cover',
    dataIndex: 'cover',
  },
  {
    title: '名称',
    dataIndex: 'name',
  },
  {
    title: '分类一',
    key: 'category1Id',
    dataIndex: 'category1Id',
  },
  {
    title: '分类二',
    dataIndex: 'category2Id',
  },
  {
    title: '文档数',
    dataIndex: 'docCount',
  },
  {
    title: '阅读数',
    dataIndex: 'viewCount',
  },
  {
    title: '点赞数',
    dataIndex: 'voteCount',
  },
  {
    title: 'Action',
    key: 'action',
    dataIndex: 'action',
  }
];

// 查询电子书列表
const handleQueryEbook = (params:any) => {
  axios.get<ResponseData>('http://localhost:8081/ebook/listByPage', {
    params: {
      page:params.page,
      size:params.size,
      name:param.value.name
    }
  }).then(response => {
    ebooks.value = response.data.content.list;//重置分页按钮
    pagination.value.total = response.data.content.total; // 修正拼写错误
    pagination.value.current = params.page;//设置总条数
  }).catch(error => {
    console.error('获取电子书列表失败:', error);
  });
};

// 分页变化处理
const handleQueryChange = (pagination: { current: number; pageSize: number }) => {
  handleQueryEbook({
    page: pagination.current,
    size: pagination.pageSize
  });
};

const add = () => {
  isModalVisible.value=true;
    ebook.value = {};
}

const edit=(record:any) =>{
  isModalVisible.value=true
  axios.get('http://localhost:8081/ebook/findOne/'+record.id).then(response=>{
    ebook.value = response.data.content;
  })
}

const del=(id:any) =>{
  axios.delete('http://localhost:8081/ebook/delete/'+id).then(response=>{
    if (response.data.success) {

      handleQueryEbook({
        page:pagination.value.current,
        size:pagination.value.pageSize
      });
    }
  })
}

const handleEbookOk = () => {
  axios.post('http://localhost:8081/ebook/save', ebook.value).then((response) => {
    if (response.data.success) {
      isModalVisible.value = false;
      //重新加载最新数据
      handleQueryEbook({
        page:pagination.value.current,
        size:pagination.value.pageSize
      })
    }
  });
}

// 组件挂载时初始化数据
onMounted(() => {
  handleQueryEbook({
    page: 1,
    size: pagination.value.pageSize
  });
});
</script>

<style scoped >

</style>
